<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 个人仓库</title>
    <script src="js/jquery-1.12.0.min.js"></script>
    <style>
    html{
        width: 100%;
        height: 100%;
        min-height: 483px;
        min-width: 890px;
        padding: 0px;
    }
    body {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }
    .outbox{
        margin: 0 auto;
        width: 100%;
        height: 100%;
        background-image: url("imgs/login_bg.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
    .outbox::before{
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        width: 0px;
        content: '';
    }
    </style>
</head>
<body>
</body>
<script>
    function GarageSence(){
        var self = this;
        self.$outbox = $("<div class='outbox'></div>");
        self.$outbox.css({"background-image":"url(imgs/login_bg.jpg)"})
        //左边效果展示
        var $effctshow = $("<div></div>");
        $effctshow.css({
            width:"256px",
            height:"57px",
            position:"absolute",
            top:"5%",
            left:"19.5%",
            "z-index":"100",
            "background-image":"url(imgs/shop/previewbg.png)"
        });
        $effctshow.appendTo(self.$outbox);
        //效果显示文字的图片
        var $effctshowtext = $("<div></div>");
        $effctshowtext.css({
            width:"118px",
            height:"29px",
            position:"absolute",
            top:"20%",
            left:"25%",
            "z-index":"100",
            "background-image":"url(imgs/effectshow.png)"
        });
        $effctshowtext.appendTo($effctshow);
        //仓库信息
        var $garageInf = $("<div></div>");
        $garageInf.css({
            width:"291px",
            height:"562px",
            position:"absolute",
            top:"9%",
            left:"18%",
            "z-index":"10",
            "background-image":"url(imgs/shop/shopleftbg.png)"
        });
        $garageInf.appendTo(self.$outbox);
        //骑手的背景
        var $perbg= $("<div></div>");
        $perbg.css({
            width:"257px",
            height:"267px",
            position:"absolute",
            top:"7%",
            left:"5%",
            "z-index":"10",
            "background-image":"url(imgs/shop/perbg.png)"
        });
        $perbg.appendTo($garageInf);
        //骑手的图片
        var $perimg= $("<div></div>");
        $perimg.css({
            width:"178px",
            height:"225px",
            position:"absolute",
            top:"8%",
            left:"15%",
            "z-index":"10",
            "background-image":"url(imgs/shop/playerimg.png)"
        });
        $perimg.appendTo($perbg);
        //越野值
        var $yueye = $("<div></div>");
        $yueye.css({
            width:"68px","z-index":"10",
            height:"27px",position:"absolute",left:"12%",top:"57%","background-image":"url(imgs/yueye.png)"
        });
        $yueye.appendTo($garageInf);
        var $yueyeval = $("<div></div>");
        $yueyeval.css({
            width:"110px",height:"27px",position:"absolute",top:"56%",left:"40%","z-index":"10",
            "font-size":"27px","font-family":"微软雅黑",boder:"1px solid black","text-fill-color":"#fff","text-strock-color":"black",
            "text-stroke-width":"2px","font-weight":"bolder"
        })
        $yueyeval.html("01234");
        $yueyeval.appendTo($garageInf);
        //跳跃值
        var $jump = $yueye.clone();
        $jump.css({ top:"65%","background-image":"url(imgs/tiaoyue.png)"});
        $jump.appendTo($garageInf);
        var $jumpval = $yueyeval.clone();
        $jumpval.css({top:"64%"});
        $jumpval.html("00000");
        $jumpval.appendTo($garageInf);
        //速度值
        var $speed = $yueye.clone();
        $speed.css({top:"73%","background-image":"url(imgs/sudu.png)"});
        $speed.appendTo($garageInf);
        var $speedval = $yueyeval.clone();
        $speedval.css({top:"72%"});
        $speedval.html("01234");
        $speedval.appendTo($garageInf);
        //坚固值
        var $hard = $yueye.clone();
        $hard.css({top:"81%","background-image":"url(imgs/jiangu.png)"});
        $hard.appendTo($garageInf);
        var $hardval = $yueyeval.clone();
        $hardval.css({top:"80%"});
        $hardval.appendTo($garageInf);
        var $hangcheng = $yueye.clone();
        $hangcheng.css({top:"89%","background-image":"url(imgs/hangcheng.png)"});
        $hangcheng.appendTo($garageInf);
        var $hangchengval = $yueyeval.clone();
        $hangchengval.css({top:"88%"});
        $hangchengval.appendTo($garageInf);

        //右边个人仓库
        var $pergaragebg = $("<div></div>");
        $pergaragebg.css({
            width:"394px",
            height:"53px",
            position:"absolute",
            top:"5%",
            left:"48%",
            "z-index":"100",
            "background-image":"url(imgs/shop/shoptopinput.png)"
        });
        $pergaragebg.appendTo(self.$outbox);
        //个人仓库文本的图片
        var $pergaragetext = $("<div></div>");
        $pergaragetext.css({
            width:"120px",
            height:"33px",
            position:"absolute",
            top:"20%",
            left:"32%",
            "z-index":"100",
            "background-image":"url(imgs/pergaragetext.png)"
        });
        $pergaragetext.appendTo($pergaragebg);
        //退出按钮
        var $esc = $("<div></div>");
        $esc.css({
            width:"64px",
            height:"64px",
            position:"absolute",
            top:"4%",
            right:"15%",
            "z-index":"100",cursor:"pointer",
            "background-image":"url(imgs/shop/esc.png)"
        });
        $esc.appendTo(self.$outbox);
        //仓库信息
        var $garageInf = $("<div></div>");
        $garageInf.css({
            width:"613px",
            height:"562px",
            position:"absolute",
            top:"9%",
            left:"40%",
            "z-index":"10",
            "background-image":"url(imgs/shop/shoprightbg.png)"
        });
        $garageInf.appendTo(self.$outbox);
        //
        var $person = $("<div></div>");
        $person.css({
            width:"143px",
            height:"104px",
            position:"absolute",
            top:"10%",
            left:"2%",
            "z-index":"10",cursor:"pointer",
            "background-image":"url(imgs/shop/hover.png)"
        });
        $person.appendTo($garageInf);
        var $role= $("<div></div>");
        $role.css({
            width:"72px",
            height:"86px",
            position:"absolute",
            top:"9%",
            left:"22%",
            "z-index":"10",cursor:"pointer",
            "background-image":"url(imgs/shop/roleimg.png)"
        });
        $role.appendTo($person);
        var $moto= $role.clone();
        $moto.css({
            width:"91px",
            height:"81px",
            top:"40%",
            left:"4%",cursor:"pointer",
            "background-image":"url(imgs/garagemoto.png)",

        });
        $moto.appendTo($garageInf);
        var $garageRbg=$("<div></div>");
        $garageRbg.css({
            width:"473px",
            height:"510px",
            position:"absolute",
            top:"6%",
            left:"22%",
            "z-index":"10",
            "background-image":"url(imgs/shop/rightlistbg.png)"
        });
        $garageRbg.appendTo($garageInf);
        var $equipdiv1=$("<div></div>");
        $equipdiv1.css({
            width:"106px",
            height:"106px",
            position:"absolute",
            top:"2%",
            left:"2%",
            "z-index":"10",cursor:"pointer",
            "background-image":"url(imgs/shop/shopPersonbg.png)"
        });
        $equipdiv1.appendTo($garageRbg);
        var $renwu = $("<div></div>");
        $renwu.css({
            width:"62px",height:"89px",position:"absolute",top:"8%",left:"15%","z-index":"10","background-image":"url(imgs/shop/shopPersen1.png)"
        });
        $renwu.appendTo($equipdiv1);
        var $equipdiv2=$equipdiv1.clone();
        $equipdiv2.css({left:"26%"});
        $equipdiv2.appendTo($garageRbg);
        var $equipdiv3=$equipdiv1.clone();
        $equipdiv3.css({left:"50%"});
        $equipdiv3.appendTo($garageRbg);
        var $equipdiv4=$equipdiv1.clone();
        $equipdiv4.css({left:"74%"});
        $equipdiv4.appendTo($garageRbg);
    }
    $(function(){
        var garage = new GarageSence($("body"));
    })

</script>
</html>